<template>
    <div class="home-main">
        <!-- 顶部 -->
        <home-header></home-header>

        <main class="main" ref="main" @scroll="getScrollTop">
            <router-view/>
        </main>

    </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex';

import HomeHeader from '../components/home-header.vue'
export default {
    name:"HomeMain",
    components:{
        HomeHeader
    },
    computed:{
       ...mapState(["scrollTop"]) 
    },
    methods:{
        ...mapMutations(["setScrollTop"]),
        getScrollTop(){
            this.$nextTick(()=>{
                this.setScrollTop(this.$refs.main.scrollTop);
            })
        }
    },
    created(){
        this.$nextTick(()=>{
            this.$refs.main.scrollTop=this.scrollTop;
        })
    }
}
</script>
<style lang="scss" scoped>
@import '../assets/common/base.scss';
.main{
    position: absolute;
    top: 50px;
    left: 0;
    height: (100%-15);
    width: 100%;
    overflow-y:scroll;
    background-color: $bodyCol;
}
</style>